<template>
  <div class="container">
    <div class="container-page2">
      <div class="top-tab">
        <img src="../../../assets/jiantou.png" alt="" />
        <span
          @click="changeLtk(it)"
          :class="ltkactive.id == it.id ? 'ltkactive' : ''"
          v-for="it in ltklist"
          :key="it.id"
        >
          {{ it.name }}
        </span>
      </div>
      <div class="container-page2-center">
        <div class="container-page2-center-left">
          <span v-for="(ltkitem, index) in LtkZtList" :key="index">
            <span
              class="ltkanli"
              :style="{
                backgroundColor: ltkitem.color,
                border: index == 0 ? '1px solid rgb(0, 140, 230)' : '',
              }"
            ></span>
            {{ ltkitem.name }}
          </span>
        </div>
        <div class="container-page2-center-right">
          <div style="margin-left: 1rem; color: #fff">
            <!-- <span>当前选择:{{ ltkactive.name }}</span> -->
          </div>
          <div>
            <div class="page2-ltkshow" ref="ltkshow"></div>
            <canvas id="Ltkcanvas" @click="showLTKdetail"></canvas>
            <canvas id="Ltkcanvas2" @click="showLTKdetail"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'LtkShowList',
    data() {
      return {
        ltkactive: {
          id: 0,
          name: '料箱立体库',
        },
        ltklist: [
          { id: 0, name: '料箱立体库' },
          { id: 1, name: '托盘立体库' },
        ],
        LtkZtList: [
          { name: '空位', color: 'transparent', type: 0 },
          { name: '满位', color: '#00C6DD', type: 1 },
          { name: '异常', color: '#AB1B1B', type: 2 },
          { name: '冻结', color: '#1D4FD6', type: 3 },
          { name: '禁止', color: '#001632', type: 4 },
        ],
        LtkListdata: [],
      }
    },
    created() {
      for (var i = 0; i < 27; i++) {
        this.LtkListdata[i] = new Array()
        for (var j = 0; j < 12; j++) {
          if (i > 0 && j == 0) {
            this.LtkListdata[i][0] = String.fromCharCode(65 + i - 1)
          } else if (i == 0) {
            this.LtkListdata[0][j] = Math.abs(5 - j + 1) + '层'
            this.LtkListdata[0][0] = 0
          } else {
            var randNum = Math.random() * 5 + 0
            //1-5随机整数（包含1，不含5：1/2/3/4）
            this.LtkListdata[i][j] = this.LtkZtList[parseInt(randNum)]
          }
        }
      }
    },
    mounted() {
      this.drawLTK()
      let that = this
      this.$nextTick(() => {
        for (var m = 1; m < 27; m++) {
          for (var n = 1; n < 6; n++) {
            let data = {
              x: m * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
              x2:
                m * Math.floor(this.$refs.ltkshow.offsetWidth / 27) +
                Math.floor(this.$refs.ltkshow.offsetWidth / 27) -
                6,
              y: n * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
              y2:
                n * Math.floor(this.$refs.ltkshow.offsetWidth / 27) +
                Math.floor(this.$refs.ltkshow.offsetWidth / 27) -
                6,
            }
            console.log(data)
            that.LtkListdata[m][n].xylist = Object.assign({}, data)
          }
        }
      })
      console.log(that.LtkListdata)
    },
    methods: {
      //展示立体库上边的弹窗
      showLTKdetail(e) {
        console.log(e)
      },
      //循环渲染数据
      forShowlist(context, /*第几列*/ lie, /*正序1，倒序0*/ sort) {
        //小方块之间的间距
        let jianju = 8
        if (lie == 1 && sort == 0) {
          for (let i = 0; i < 27; i++) {
            for (let j = 0; j < 6; j++) {
              if (i == 0 && j > 0) {
                this.fillText(
                  context,
                  this.LtkListdata[i][j],
                  i * Math.floor(this.$refs.ltkshow.offsetWidth / 27) + 5,
                  j * Math.floor(this.$refs.ltkshow.offsetWidth / 27) + 5,
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - 16,
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - 16,
                  3,
                  '#023E88'
                )
                // context.fillText(this.LtkListdata[i][j], i * Math.floor(this.$refs.ltkshow.offsetWidth / 27), j * Math.floor(this.$refs.ltkshow.offsetWidth / 27))
              } else if (i > 0 && j == 0) {
                this.fillText(
                  context,
                  this.LtkListdata[i][j],
                  i * Math.floor(this.$refs.ltkshow.offsetWidth / 27) + 5,
                  j * Math.floor(this.$refs.ltkshow.offsetWidth / 27) + 5,
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - 16,
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - 16,
                  3,
                  '#023E88'
                )
              } else if ((i == 0) & (j == 0)) {
              } else {
                let color = ''
                switch (this.LtkListdata[i][j].type) {
                  case 0:
                    color = 'transparent'
                    break
                  case 1:
                    color = '#00C6DD'
                    break
                  case 2:
                    color = '#AB1B1B'
                    break
                  case 3:
                    color = '#1D4FD6'
                    break
                  case 4:
                    color = '#001632'
                    break
                }
                if (this.LtkListdata[i][j].type == 0) {
                  this.strokeRect(
                    context,
                    i * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
                    j * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
                    Math.floor(this.$refs.ltkshow.offsetWidth / 27) - jianju,
                    Math.floor(this.$refs.ltkshow.offsetWidth / 27) - jianju,
                    3,
                    '#008CE6'
                  )
                }
                this.fillRoundRect(
                  context,
                  i * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
                  j * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - jianju,
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - jianju,
                  3,
                  color
                )
              }
            }
          }
        } else if (lie != 1 && sort == 1) {
          for (let m = 0; m < 27; m++) {
            for (let n = 7; n < 12; n++) {
              if (m == 0 && n > 0) {
                this.fillText(
                  context,
                  this.LtkListdata[m][n],
                  m * Math.floor(this.$refs.ltkshow.offsetWidth / 27) + 5,
                  (n - 7) * Math.floor(this.$refs.ltkshow.offsetWidth / 27) + 5,
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - 16,
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - 16,
                  3,
                  '#023E88'
                )
                // context.fillText(this.LtkListdata[m][n], m * Math.floor(this.$refs.ltkshow.offsetWidth / 27), n * Math.floor(this.$refs.ltkshow.offsetWidth / 27))
              } else {
                let color = ''
                switch (this.LtkListdata[m][n].type) {
                  case 0:
                    color = 'transparent'
                    break
                  case 1:
                    color = '#00C6DD'
                    break
                  case 2:
                    color = '#AB1B1B'
                    break
                  case 3:
                    color = '#1D4FD6'
                    break
                  case 4:
                    color = '#001632'
                    break
                }
                if (this.LtkListdata[m][n].type == 0) {
                  this.strokeRect(
                    context,
                    m * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
                    (n - 7) * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
                    Math.floor(this.$refs.ltkshow.offsetWidth / 27) - jianju,
                    Math.floor(this.$refs.ltkshow.offsetWidth / 27) - jianju,
                    3,
                    '#008CE6'
                  )
                }
                this.fillRoundRect(
                  context,
                  m * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
                  (n - 7) * Math.floor(this.$refs.ltkshow.offsetWidth / 27),
                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - jianju,

                  Math.floor(this.$refs.ltkshow.offsetWidth / 27) - jianju,
                  3,
                  color
                )
              }
            }
          }
        }
      },
      //绘制立体库
      drawLTK() {
        let canvas = document.getElementById('Ltkcanvas')
        let context = canvas.getContext('2d')
        canvas.width = this.$refs.ltkshow.offsetWidth
        canvas.height =
          Math.floor((this.$refs.ltkshow.offsetWidth / 27) * 6) + 30
        let canvas2 = document.getElementById('Ltkcanvas2')
        let context2 = canvas2.getContext('2d')
        canvas2.width = this.$refs.ltkshow.offsetWidth
        canvas2.height = Math.floor((this.$refs.ltkshow.offsetWidth / 27) * 5)
        // this.drawRoundRect(context, 100, 100, 600, 500, 50);
        // this.fillRoundRect(context, 0, 0, 26 * 40, 5 * 40, 2, "#bbada0");
        this.forShowlist(context, 1, 0)
        //画轨道线
        context.moveTo(
          0,
          Math.floor((this.$refs.ltkshow.offsetWidth / 27) * 6 + 15)
        )
        context.lineTo(
          this.$refs.ltkshow.offsetWidth - 30,
          Math.floor((this.$refs.ltkshow.offsetWidth / 27) * 6) + 15
        )
        context.strokeStyle = '#008CE6'
        context.lineWidth = 3
        context.stroke()
        this.fillText(
          context,
          '西',
          0,
          Math.floor((this.$refs.ltkshow.offsetWidth / 27) * 6),
          30,
          30,
          15,
          '#008CE6'
        )
        this.fillText(
          context,
          '东',
          this.$refs.ltkshow.offsetWidth - 40,
          Math.floor((this.$refs.ltkshow.offsetWidth / 27) * 6),
          30,
          30,
          15,
          '#008CE6'
        )
        this.forShowlist(context2, 2, 1)
      },
      drawRoundRect(
        cxt,
        x,
        y,
        width,
        height,
        radius,
        /*option*/ linewidth,
        /*option*/ linecolor
      ) {
        cxt.save()
        cxt.translate(x, y)
        this.pathRoundRect(cxt, width, height, radius)
        cxt.lineWidth = linewidth || 1
        cxt.strokeStyle = linecolor || 'black'
        cxt.stroke()
        cxt.restore()
      },
      fillRoundRect(cxt, x, y, width, height, radius, /*option*/ fillcolor) {
        cxt.save()
        cxt.translate(x, y)
        this.pathRoundRect(cxt, width, height, radius)
        cxt.fillStyle = fillcolor || 'black'
        cxt.fill()
        cxt.restore()
      },
      //填充加写字
      fillText(cxt, text, x, y, width, height, radius, fillcolor) {
        cxt.save()
        cxt.translate(x, y)
        cxt.textAlign = 'center'
        cxt.textBaseline = 'middle'
        cxt.font = '16px Arial'
        this.pathRoundRect(cxt, width, height, radius)
        cxt.fillStyle = fillcolor || 'black'
        cxt.fill()
        cxt.fillStyle = '#fff'
        cxt.fillText(text, width / 2, height / 2)
        cxt.restore()
      },
      //描边
      strokeRect(cxt, x, y, width, height, radius, /*option*/ steolecolor) {
        cxt.save()
        cxt.translate(x, y)
        this.pathRoundRect(cxt, width, height, radius)
        cxt.strokeStyle = steolecolor || 'black'
        cxt.stroke()
        cxt.restore()
      },
      pathRoundRect(cxt, width, height, radius) {
        cxt.beginPath()
        cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2)
        cxt.lineTo(width - radius, height)
        cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI)
        cxt.lineTo(0, radius)
        cxt.arc(radius, radius, radius, Math.PI, (Math.PI / 2) * 3)
        cxt.lineTo(width - radius, 0)
        cxt.arc(width - radius, radius, radius, (Math.PI / 2) * 3, Math.PI * 2)
        cxt.closePath()
      },
      //改变立体库
      changeLtk(it) {
        this.ltkactive = it
      },
    },
  }
</script>
<style lang="scss" scoped>
  .container {
    width: 100%;
  }

  .container-page2 {
    width: inherit;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;

    .top-tab {
      width: 100%;
      height: 0.48rem;
      border: 1px solid rgb(33, 90, 159);
      font-size: 0.18rem;
      line-height: 0.48rem;
      color: rgba($color: #fefefe, $alpha: 0.6);
      display: inline-flex;

      img {
        display: inline-block;
        margin: auto 0.1rem;
      }

      span {
        margin-right: 0.2rem;
      }

      .ltkactive {
        color: #fff;
        font-size: 0.18rem;
      }
    }

    .container-page2-center {
      width: 100%;
      flex: 1;
      margin-top: 0.1rem;
      display: flex;

      .container-page2-center-left {
        width: 1.2rem;
        height: 100%;
        border: 1px solid rgb(33, 90, 159);
        display: flex;
        flex-direction: column;
        text-align: center;
        color: #fff;

        span {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        }

        .ltkanli {
          display: inline-block;
          width: 0.4rem;
          height: 0.25rem;
          // border: 1px solid rgb(0, 140, 230);
          margin: 0.1rem;
          border-radius: 0.05rem;
        }
      }

      #page2-dqxz {
        margin-left: 0.2rem;
        color: #fff;
      }

      .container-page2-center-right {
        padding-left: 0.15rem;
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 0.75rem - 0.5rem - 0.2rem - 0.2rem);
        overflow: hidden;

        .page2-ltkshow {
          flex: 1;
          overflow: auto;
        }
      }
    }
  }
</style>
